<template>
  <div class="swiper">
    <div class="banner">
      <template v-for="(item, index) in tableData" :key="index">
        <div :style="item.styleIndex">
          <img :src="item.flagUrl" alt="" />
        </div>
      </template>
      <div class="c" :style="styleIndex.imageIndex">
        <img src="../assets/images/挪威.png" alt="" />
      </div>
      <!-- <div class="d" style="--i: 1"></div>
      <div class="e" style="--i: 2"></div>
      <div class="f" style="--i: 3"></div>
      <div class="g" style="--i: 4"></div> -->
    </div>
    <img
      class="center"
      src="../assets/images/冰墩墩.png"
      style="width: 300px"
      alt=""
    />
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
    },
  },
  setup() {
    const styleIndex = {
      imageIndex: "--i: 0",
    };
    const tableData = [
      {
        ranking: 1,
        styleIndex: "--i: 0",
        country: "挪威",
        flagUrl: "/src/assets/images/挪威.png",
        gold: 9,
        silver: 5,
        bronze: 7,
        total: 21,
      },
      {
        ranking: 2,
        styleIndex: "--i: 1",
        country: "德国",
        flagUrl: "/src/assets/images/德国.png",
        gold: 8,
        silver: 5,
        bronze: 2,
        total: 15,
      },
      {
        ranking: 3,
        styleIndex: "--i:2",
        country: "美国",
        flagUrl: "/src/assets/images/美国.png",
        gold: 7,
        silver: 6,
        bronze: 3,
        total: 16,
      },
      {
        ranking: 4,
        styleIndex: "--i:3",
        country: "荷兰",
        flagUrl: "/src/assets/images/荷兰.png",
        gold: 6,
        silver: 4,
        bronze: 2,
        total: 12,
      },
      {
        ranking: 5,
        styleIndex: "--i:4",
        country: "奥地利",
        flagUrl: "/src/assets/images/奥地利.png",
        gold: 5,
        silver: 6,
        bronze: 4,
        total: 15,
      },
      {
        ranking: 6,
        styleIndex: "--i:5",
        country: "瑞典",
        flagUrl: "/src/assets/images/瑞典.png",
        gold: 5,
        silver: 3,
        bronze: 3,
        total: 11,
      },
      {
        ranking: 8,
        styleIndex: "--i:6",
        country: "俄罗斯奥委会",
        flagUrl: "/src/assets/images/俄罗斯奥委会.png",
        gold: 4,
        silver: 6,
        bronze: 8,
        total: 18,
      },
      {
        ranking: 9,
        styleIndex: "--i:7",
        country: "法国",
        flagUrl: "/src/assets/images/法国.png",
        gold: 3,
        silver: 6,
        bronze: 2,
        total: 11,
      },
      {
        ranking: 10,
        styleIndex: "--i:8",
        country: "瑞士",
        flagUrl: "/src/assets/images/瑞士.png",
        gold: 3,
        silver: 0,
        bronze: 5,
        total: 8,
      },
      {
        ranking: 11,
        styleIndex: "--i:9",
        country: "意大利",
        flagUrl: "/src/assets/images/意大利.png",
        gold: 5,
        silver: 3,
        bronze: 2,
        total: 10,
      },
      {
        ranking: 12,
        styleIndex: "--i:10",
        country: "日本",
        flagUrl: "/src/assets/images/日本.png",
        gold: 5,
        silver: 3,
        bronze: 2,
        total: 10,
      },
      {
        ranking: 13,
        styleIndex: "--i:11",
        country: "斯洛文尼亚",
        flagUrl: "/src/assets/images/斯洛文尼亚.png",
        gold: 5,
        silver: 3,
        bronze: 2,
        total: 10,
      },
      {
        ranking: 14,
        styleIndex: "--i:12",
        country: "加拿大",
        flagUrl: "/src/assets/images/加拿大.png",
        gold: 5,
        silver: 3,
        bronze: 2,
        total: 10,
      },
      {
        ranking: 15,
        styleIndex: "--i:13",
        country: "韩国",
        flagUrl: "/src/assets/images/韩国.png",
        gold: 5,
        silver: 3,
        bronze: 2,
        total: 10,
      },
      {
        ranking: 16,
        styleIndex: "--i:14",
        country: "澳大利亚",
        flagUrl: "/src/assets/images/澳大利亚.png",
        gold: 5,
        silver: 3,
        bronze: 2,
        total: 10,
      },
      {
        ranking: 17,
        styleIndex: "--i:15",
        country: "芬兰",
        flagUrl: "/src/assets/images/芬兰.png",
        gold: 5,
        silver: 3,
        bronze: 2,
        total: 10,
      },
      {
        ranking: 18,
        styleIndex: "--i:16",
        country: "匈牙利",
        flagUrl: "/src/assets/images/匈牙利.png",
        gold: 5,
        silver: 3,
        bronze: 2,
        total: 10,
      },
      {
        ranking: 19,
        styleIndex: "--i:17",
        country: "捷克",
        flagUrl: "/src/assets/images/捷克.png",
        gold: 5,
        silver: 3,
        bronze: 2,
        total: 10,
      },
      {
        ranking: 20,
        styleIndex: "--i:18",
        country: "斯洛伐克",
        flagUrl: "/src/assets/images/斯洛伐克.png",
        gold: 5,
        silver: 3,
        bronze: 2,
        total: 10,
      },
      {
        ranking: 20,
        styleIndex: "--i:19",
        country: "新西兰",
        flagUrl: "/src/assets/images/新西兰.png",
        gold: 5,
        silver: 3,
        bronze: 2,
        total: 10,
      },
      {
        ranking: 22,
        styleIndex: "--i:20",
        country: "白俄罗斯",
        flagUrl: "/src/assets/images/白俄罗斯.png",
        gold: 5,
        silver: 3,
        bronze: 2,
        total: 10,
      },
      // {
      //   ranking: 23,
      //   country: "西班牙",
      //   gold: 5,
      //   silver: 3,
      //   bronze: 2,
      //   total: 10,
      // },
      // {
      //   ranking: 24,
      //   country: "拉脱维亚",
      //   gold: 5,
      //   silver: 3,
      //   bronze: 2,
      //   total: 10,
      // },
      // {
      //   ranking: 24,
      //   country: "波兰",
      //   gold: 5,
      //   silver: 3,
      //   bronze: 2,
      //   total: 10,
      // },
    ];
    return { styleIndex };
  },
};
</script>

<style scoped>
.swiper {
  width: 100%;
  position: relative;
  /* left: 400px; */
  perspective: 1600px;
  /* top: 500px; */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.banner {
  width: 200px;
  height: 125px;
  position: absolute;
  transform-style: preserve-3d;

  animation: a 50s linear infinite;
}
.banner div {
  position: absolute;
  background-size: cover;
  opacity: 0.8;
  width: 150px;
  height: 93px;
  transform: rotateY(calc(var(--i) * 90deg)) translateZ(200px)
    translateY(calc(var(--i) * 200px));
}
.center {
  transform-style: preserve-3d;
  transform: translateZ(-500px);
  z-index: -1;
}
@keyframes a {
  0% {
    transform: rotateY(0) translateY(0px);
  }
  /* 45% {
    transform: rotateY(-90deg) translateY(-200px);
  }
  50% {
    transform: rotateY(-180deg) translateY(-400px);
  }
  75% {
    transform: rotateY(-270deg) translateY(-600px);
  } */
  100% {
    transform: rotateY(-8640deg) translateY(-2000px);
  }
}
</style>